﻿<!doctype html>
<html>
<head>
    <title>SpreadJS - Comment Event</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <script id="scriptInit" type="text/javascript">
        /*code_begin*/
        $(document).ready(function () {
            var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"));
            initSpread(spread);
        });

        function initSpread(spread) {
            var spreadNS = GcSpread.Sheets;
            var sheet = spread.getSheet(0);
            var comment = new spreadNS.Comment();
            comment.text("new comment!");
            sheet.setComment(1, 1, comment);

            var $commentEvent = $("#commentEvent");
            sheet.bind(spreadNS.Events.CommentChanged, function(e, args) {
                var text = $commentEvent.text();
                if (text !== "") {
                    text += '\n';
                }
                $commentEvent.text(text + "CommentChanged: " + " " + args.propertyName);
            });

            // get comment and change some properties to fire event
            var comment = sheet.getComment(1, 1);
            comment.text("Edit the comment, do resize, drag or other actions to fire the CommentChanged event.");
            comment.backColor("skyblue");
            comment.displayMode(spreadNS.DisplayMode.AlwaysShown);
        };
        /*code_end*/
    </script>

</head>
<body>
<div class="sample-turtorial">
    <div id="ss" style="width:100%; height:340px;border: 1px solid gray;"></div>
    <div class="demo-options">
        <textarea id="commentEvent" style="width: 100%; height: 90px"></textarea>
    </div>
</div>
</body>
</html>
